<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天猫</title>
    <style>
        .div1{
            height: 43px;
            width: 1515px;
            /*border: 1px red solid;*/
            background-color: #F2F2F2;
            font-size: 10px;
            color: gray;
            margin-top: -11px;
            float: right;
            margin-left: 0;
        }
        .div2{
            height: 155px;
            width: 1500px;
            /*border: 1px red solid;*/
            background-color: #FFFFFF;
        }
        .div3{
            height: 600px;
            width: 1500px;
            /*border: 1px red solid;*/
            background-image: url("素材/1.jpg");
            background-repeat: no-repeat;
            background-size: 100% 100%;
        }

        .div4{
            height: 440px;
            width: 502px;
            /*border: 1px red solid;*/
            float: right;
            background-color: #FFFFFF;
            margin-top: 3%;
            margin-right: 2%;
        }
        form {
            text-align: center;
        }
        .div11{
            margin-top: 15px;
            margin-left: 10%;
            float: left;
        }
        ul{
            float: right;
            list-style-type: none;
        }
        ul li{
            float: right;
            padding-top: 5px;
            padding-right: 30px;
        }
        .div2 img{
            float: left;
            height: 90px;
            width: 170px;
            margin-top: 33px;
            margin-left: 10px
        }
        .div2 div{
            height: 50px;
            width: 820px;
            float: left;
            margin-left: 10%;
            margin-top: 50px;
        }
        .div2 div input{
            height: 34px;
            width: 647px;
            border-color: #FF0036;
            padding-right: 47px;
            float: left;
        }
        .div2 div button{
            height: 40px;
            width: 120px;
            background-color: #FF0036;
            color: #FFFFFF;
            letter-spacing: 10px;
            border-style: none;
        }
    </style>
</head>
<body>
    <div class="div1">
        <div class="div11">喵，欢迎来天猫 &nbsp;&nbsp; &nbsp;请登录&nbsp;&nbsp;&nbsp;免费注册</div>
        <form >
            <ul>
                <li>我的淘宝</li>
                <li>购物车</li>
                <li>收藏夹</li>
                <li>手机版</li>
                <li>淘宝网</li>
                <li>商家支持</li>
                <li>网站导航</li>
            </ul>
        </form>

    </div>
    <div class="div2">
        <img src="素材/logo.png">
        <div>
            <form>
                <input type="text" name="search" placeholder="搜索&nbsp;&nbsp;&nbsp;天猫&nbsp;&nbsp;&nbsp;商品/品牌/店铺">
                <button>搜索</button>
            </form>
        </div>
    </div>
    <div class="div3">
        <div class="div4">
            <form action="#" method="get" autocapitalize="on">
                <p>注册详情</p>
                <hr>
                <div>
                    <div>姓名:&nbsp;&nbsp;<input type="text" name="username" placeholder="请输入用户名"></div>
                    <div>密码:&nbsp;&nbsp;<input type="password" name="password" placeholder="请输入密码"></div>
                    <div>邮箱:&nbsp;&nbsp;<input type="email" name="email" placeholder="在此输入邮箱"></div>
                    <div>手机:&nbsp;&nbsp;<input type="tel" name="phone" placeholder="在此输入手机号"></div>
                    <hr>
                </div>
                <div>
                    <div>
                        性别: <input type="radio" name="gender">男
                              <input type="radio" name="gender">女
                    </div>
                    <div>
                        爱好: <input type="checkbox" name="ai1">音乐
                            <input type="checkbox" name="ai2">电影
                            <input type="checkbox" name="ai3">游戏
                    </div>
                    <div>
                        出生日期:<input type="date">
                    </div>
                    <div>
                        所在城市:<select>
                        <option>请输入您所在城市</option>
                        <optgroup label="直辖市">
                            <option>北京</option>
                            <option>上海</option>
                            <option>广州</option>
                            <option>深圳</option>
                        </optgroup>
                        <optgroup label="省会城市">
                            <option>西安</option>
                            <option>杭州</option>
                            <option>郑州</option>
                            <option>武汉</option>
                        </optgroup>
                    </select>
                    </div>
                    <hr>
                    <div>
                        个性签名:<textarea rows="4" cols="50" placeholder="写下你的与众不同"></textarea>
                        <hr>
                    </div>
                    <div>
                        <button type="submit">注册</button>
                        <button type="reset">重置</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</body>
</html>